<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="false"
      back-icon-name="arrow-leftward"
      title="注册"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
		<u-toast ref="uToast" />
    <view class="content">
      <u-form :model="form" ref="uForm" :label-width="150">
        <u-form-item label="手机号"
          ><u-input v-model="form.phone" placeholder="请输入手机号"
        /></u-form-item>
        <u-form-item label="密码">
          <u-input
            v-model="form.password"
            placeholder="字母、数字，6-12位"
            type="password"
            :password-icon="true"
          />
        </u-form-item>
        <u-form-item label="确认密码">
          <u-input
            v-model="form.password2"
            placeholder="请再次输入密码"
            type="password"
            :password-icon="true"
          />
        </u-form-item>
        <u-form-item label="昵称"
          ><u-input v-model="form.nickname" placeholder="请输入昵称"
        /></u-form-item>
        <u-form-item label="年龄"
          ><u-input v-model="form.age" placeholder="请输入年龄"
        /></u-form-item>
        <u-form-item label="地区"
          ><u-input v-model="form.area" placeholder="请输入地区"
        /></u-form-item>
        <u-form-item label="头像"
          >
          <u-upload :maxCount="1" ref="uUpload" :action="action" :file-list="fileList" ></u-upload>
        </u-form-item>
      </u-form>
      <button class="submit" @click="submit">注册</button>
				<view @click="login" class="register">返回登录</view>
    </view>
  </view>
</template>

<script>
import { register } from '../../api/system/api'
export default {
  onLoad(option) {
    const { redirect } = option;
    if (redirect) this.redirect = redirect;
  },
  data() {
    return {
      form: {
        password: "",
        password2: "",
        nickname: "",
        age: "",
				phone: '',
				area: '',
      },
			action: 'http://127.0.0.1:3000/upload',
    };
  },
  methods: {
    submit() {
      console.log(this.form)
      if (!this.form.phone) {
				this.$refs.uToast.show({
					title: '请输入手机号',
					type: 'error',
				})
				return
			}
      if (!this.form.password) {
				this.$refs.uToast.show({
					title: '请输入密码',
					type: 'error',
				})
				return
			}
      if (!this.form.password2) {
				this.$refs.uToast.show({
					title: '请输入确认密码',
					type: 'error',
				})
				return
			}
      if (!this.form.nickname) {
				this.$refs.uToast.show({
					title: '请输入昵称',
					type: 'error',
				})
				return
			}
      if (!this.form.age) {
				this.$refs.uToast.show({
					title: '请输入年龄',
					type: 'error',
				})
				return
			}
      if (!this.form.area) {
				this.$refs.uToast.show({
					title: '请输入地区',
					type: 'error',
				})
				return
			}
      // let reg2 = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
      // if (!reg2.test(this.form.phone)) {
      //   this.$refs.uToast.show({
			// 		title: '手机号不符合规则',
			// 		type: 'error',
			// 	})
			// 	return
      // }
      // // 正则校验用户名和密码
      // let reg = /^(\w){6,12}$/;
      // if (!reg.test(this.form.password)) {
      //   this.$refs.uToast.show({
			// 		title: '密码不符合规则',
			// 		type: 'error',
			// 	})
			// 	return
      // }
      // if (this.form.password !== this.form.password2) {
			// 	this.$refs.uToast.show({
			// 		title: '两次密码不一致',
			// 		type: 'error',
			// 	})
			// 	return
      // }
      let form = JSON.parse(JSON.stringify(this.form))
      form.avator = this.$refs.uUpload.lists.length ? this.$refs.uUpload.lists[0].response.imgName : 'user.svg'
      delete form.password2
      register(form).then(res => {
        if (res.code === 200) {
          this.$refs.uToast.show({
            title: '注册成功~',
            type: 'success',
          })
			    this.$u.route('/pages/interest/login')
        } else {
          this.$refs.uToast.show({
            title: res.msg,
            type: 'error',
          })
        }
      })
    },
    login() {
			this.$u.route('/pages/interest/login')
    },
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;

  .set-icon {
    vertical-align: middle;
    width: 41rpx;
    height: auto;
    margin-right: 35rpx;
  }
}

.content {
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 30rpx;
  height: 90vh;
  width: 100%;

  .top {
    width: 100%;
  }

  .logo {
    display: block;
    width: 281rpx;
    height: auto;
    margin: 0 auto 60rpx;
  }

  .cell {
    width: 100%;
    padding: 0 85rpx;
    box-sizing: border-box;
    margin-top: 36rpx;

    .name {
      font-size: 22rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #3e4a59;
      line-height: 30rpx;
      opacity: 0.72;
    }

    .input-box {
      padding: 30rpx 0;
      border-bottom: 2rpx solid #f6f6f6;
      display: flex;
      align-items: center;

      .code {
        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #0d0d0d;
        line-height: 30rpx;

        text {
          // color: #14b9c8;
          color: #e58b8a;
        }
      }

      .ipt {
        flex: 1;
        // height: 24rpx;
        font-size: 24rpx;
      }

      .hold {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #3e4a59;
        line-height: 30px;
        opacity: 0.45;
      }
    }
  }

  .agree {
    margin: 27rpx 95rpx 0;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #cacaca;
    line-height: 34rpx;

    .a {
      color: #000000;
    }
  }

  .submit {
    width: calc(100% - 60rpx);
    margin: 60rpx auto;
    border: none;
    height: 86rpx;
    line-height: 86rpx;
    box-sizing: border-box;
    border-radius: 15rpx;
    background-color: #e58b8a;
    color: #ffffff;

    &::after {
      content: none;
    }

    &::before {
      content: none;
    }

    &[disabled="true"] {
      background: #e4e4e4;
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .register {
    width: 100%;
    text-align: center;
    margin-top: 20rpx;
  }

  .tip {
    margin-top: 30rpx;
    text-align: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #cacaca;
    line-height: 34rpx;
  }

  .change {
    margin-top: 20rpx;
    text-align: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    // color: #14b9c8;
    color: #e58b8a;
    line-height: 34rpx;
  }

  .tag {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #9f9f9f;
    line-height: 34rpx;

    &::before {
      content: "";
      display: block;
      width: 160rpx;
      height: 1px;
      background: #d8d8d8;
      opacity: 0.86;
    }

    &::after {
      content: "";
      display: block;
      width: 160rpx;
      height: 1px;
      background: #d8d8d8;
      opacity: 0.86;
    }
  }

  .chat-arr {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .icon {
      width: 73rpx;
      height: 73rpx;
    }
  }
}

.register {
  width: 100%;
  text-align: center;
  margin-top: 20rpx;
}
</style>
